在這篇文章中，我們將介紹 JavaScript 中的物件（Object）和JSON（JavaScript Object Notation），這兩者是進行資料處理和交換的重要工具。你會學到如何使用物件來組織數據，以及如何使用 JSON 在前後端之間傳遞數據。這對於建立更互動且功能豐富的網站是非常關鍵的。

一、JavaScript 物件介紹

JavaScript 的物件是一種將相關數據和功能組織到一起的結構。在 JavaScript 中，物件是屬於「參照資料類型」，允許你用一個命名的集合來描述資料。

1.1 物件的語法

一個基本的 JavaScript 物件由一對花括號{}括住，裡面包含一系列的鍵值對（key-value pairs）。每個鍵對應一個值，這些值可以是不同的數據類型，如字串、數字、陣列、甚至是函數。
範例：

const person = {
  name: "John",
  age: 30,
  isStudent: false,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

在這個範例中，我們建立了一個 person 物件，並為它定義了幾個屬性（name、age、isStudent）以及一個方法 greet，這個方法可以讓該物件輸出自己的名字。

1.2 如何存取物件的屬性

可以透過兩種方式來存取物件的屬性：

• 點標記法（Dot Notation）： person.name
• 方括號標記法（Bracket Notation）： person["name"]

範例：

console.log(person.name); // 輸出：John
console.log(person["age"]); // 輸出：30

1.3 修改物件的屬性

你可以輕鬆地修改物件的屬性值，或是新增新的屬性：
範例：

person.age = 31; // 修改年齡屬性
person.city = "Taipei"; // 新增城市屬性
console.log(person);

二、JSON 格式介紹

JSON（JavaScript Object Notation，JavaScript 物件表示法）是一種用來表示數據的輕量級格式，主要用於在伺服器與客戶端之間傳遞結構化數據。它以人類可讀的形式組織資料，並且易於程式解析和生成，因此廣泛應用於現代網頁應用中，特別是在進行API 請求或數據傳輸時。

2.1 JSON 的基本語法

JSON 的數據是以鍵-值對（key-value pairs）來表示的，數據可以是物件或陣列的形式。

• 鍵(key)必須是字串，且使用雙引號包住。
• 值(value)可以是字串、數字、布林值、陣列、物件或 null。
  物件範例：

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "skills": ["JavaScript", "HTML", "CSS"]
}

陣列：由方括號 [] 包圍，內部是一組按順序排列的數據。數據可以是任意類型，包括物件、數字、字串等。
範例：

[
  "apple",
  "banana",
  "cherry"
]

2.2 將 JavaScript 物件轉換為 JSON

使用 JSON.stringify() 可以將 JavaScript 物件轉換為 JSON 格式，這在需要將資料傳送到伺服器時非常有用。
範例：

const person = {
  name: "John",
  age: 30,
  isStudent: false
};

const jsonString = JSON.stringify(person);
console.log(jsonString); // 輸出：{"name":"John","age":30,"isStudent":false}

2.3 將 JSON 字串轉換為 JavaScript 物件

使用 JSON.parse() 可以將 JSON 字串轉換為 JavaScript 物件，這在接收到伺服器的資料時非常有用。
範例：

const jsonString = '{"name":"John","age":30,"isStudent":false}';
const parsedPerson = JSON.parse(jsonString);
console.log(parsedPerson.name); // 輸出：John

三、JSON 的應用場景

API 資料傳輸：JSON 是最常用於前端和後端之間進行資料傳輸的格式。例如，前端的 JavaScript 程式會發送一個 API 請求，伺服器返回 JSON 格式的數據。這些數據可以是用戶資料、商品資訊、天氣預報等。
例如，從 API 獲取的一個範例響應：

{
  	"temperature": 22,
  	"weather": "sunny",
  	"location": "Los Angeles"
}

配置文件：許多應用會使用 JSON 作為配置文件的格式，因為它簡單、易於讀取和編輯。
例如：

{
  	"theme": "dark",
  	"notificationsEnabled": true,
  	"autoSaveInterval": 5
 }

四、JSON vs. JavaScript 物件

JSON 的格式源自於 JavaScript 的物件語法，但兩者有一些重要的區別：

• JSON 只能表示數據，而 JavaScript 物件還可以包含函數、方法。
• JSON 的鍵必須是雙引號包裹的字串，而在 JavaScript 物件中，鍵可以不用引號。
  範例比較：

// JSON
{
  "name": "Charlie"
}

// JavaScript 物件
const person = {
  name: "Charlie"
};

五、總結

JavaScript 物件和 JSON 是資料處理的核心概念。物件能夠幫助你在前端組織和操作數據，JSON 則使你能夠輕鬆地在前後端進行數據交換。學會如何使用這兩者是構建現代動態網站的重要基礎。